<template>
	<view>
		
       <!-- <view class="first_tab">
           <view class="goods_item"
			v-for="(item,index) in goodsListIndex1">
			
                <view class="goods_img_wrap" @click="navigatorTo1(item.id)">
					<view class="imgRadius">
						 <image mode="widthFix" :src="item.firstPicUrl"> </image>
					</view>
                </view>
           
                <view class="goods_info_wrap" @click="navigatorTo1(item.id)">
                    <view class="goods_name">{{item.name}}</view>
                    <view class="goods_price">￥{{item.price}}</view>
					<view class="goods_createTime">发布时间:{{item.createTime}}</view>
                </view>
				
				<view class="statusBut">
					<image  src="http://1.14.247.152:9797/images/16615xiajia.png" mode="widthFix" @click=""></image>
				</view>
            </view>
				
        </view> -->
		
		 <!-- v-for="(item, key) in goodsListIndex" :key="key" @click="detail(item, $event)" -->
		<view class="content-list">
			<view class="goods-item"  v-for="(item,index) in goodsListIndex"  @click="navigatorTo1(item.id)">
				<image :src="item.firstPicUrl"></image>
				<view class="goods-item-content">
					<view class="goods-title text-line-hide">{{item.name}}</view>
					<!-- <view class="goods-little-title gary-font text-line-hide">{{item.littleTitle}}</view> -->
					<view class="goods-amount">
						<text space="emsp">￥{{item.price}}</text>
						<view class="gary-font text-line-hide">5000人付款</view>
					</view>
					<!-- <view class="goods-label"><rich-text :nodes="item.label"></rich-text></view> -->
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		name:"goodsListIndex",
		// name: "MkGoodsList",
		// props: {
		// 	goodsListIndex: {
		// 		type: Array,
		// 		default: []
		// 	},
		// },
		props: {
			goodsListIndex: {
				type: Array
			},
			
		},
		computed:{
			goodsListIndex1:{
				get(){
					console.log('goodsListIndex1里面的get()')
					return this.goodsListIndex;
				},
				set(value){
					console.log('goodsListIndex1被修改了！！！',value)
					//value是被删的数组元素
					// this.goodsListIndex=value
					this.$forceUpdate()
				}
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			navigatorTo1(id){
				console.log('***000000000000000')
				uni.navigateTo({
					url:"/pages/goodsDetail/goodsDetail?goodId="+id
				})
			},	
			detail(item, e) {
				this.$emit("clickItem", item, e);
			}
			},
		}
	
</script>

<style lang="scss">
	.first_tab{
	    .goods_item{
	        display: flex;
	        // border-bottom: .1rpx solid #ccc;
			padding: 10rpx 0;
			width: 93%;
			margin: auto;
			margin-bottom: 20rpx;
			border-radius: 20rpx;
			box-shadow: 0.5rpx 0.5rpx 40rpx #DBDBDB;
	        .goods_img_wrap{
	            flex: 2;
				height: 200rpx;
	            display: flex;
				justify-content: center;
				.imgRadius{
					width: 70%;
					height: 100%;
					border-radius: 18rpx;
					display: flex;
					overflow: hidden;
					justify-content: center;
					align-items: center;
				}
	            image{
	                width: 100%;
	            } 
	        }
	        .goods_info_wrap{
	            flex: 3;
	            display: flex;
	            flex-direction:column ;
	            justify-content: space-around;
	            .goods_name{
	                display: -webkit-box;
	                width: 310rpx;
	                overflow: hidden;
	                -webkit-box-orient: vertical;
	                -webkit-line-clamp: 2;
	                text-overflow: ellipsis;
	            }
	            .goods_price{
	                color: #fd4f02;
	                font-size: 38rpx;
	            }
				.goods_createTime{
					font-size: 25rpx;
					white-space: nowrap;
				}
	        }
			.statusBut{
				flex: 1;
				display: flex;
				justify-content: left;
				align-items: center;
				image{
					width: 69%;
				}
			}
	    }
	
	}
	.content-list {
		width: 100%;
		margin: 0 19rpx;
		display: flex;
		flex-wrap: wrap;
	}
	.goods-item {
		background-color: #ffffff;
		width: 347.5rpx;
		border-radius: 19rpx;
		margin: 0 19rpx 19rpx 0;
	}
	.goods-item image {
		width: 100%;
		height: 308rpx;
		border-radius: 19rpx 19rpx 0 0;
	}
	.goods-item-content {
		padding: 19rpx;
	}
	.goods-little-title {
		padding: 10rpx 0;
	}
	.goods-title {
		font-weight: bold;
	}
	.goods-amount {
		display: flex;
		align-items: baseline;
	}
	.goods-amount text {
		color: #ff0000;
	}
	.goods-amount view {
		margin-left: 22rpx;
	}
	.goods-label {
		padding: 10rpx 0 0;
	}
	.gary-font {
		color: #999;
		font-size: 22rpx;
	}
	.text-line-hide {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>
